//获取元素对象
function $(obj){
	return document.getElementById(obj);
}
//1 鼠标经过小盒子：显示遮罩和大图
//鼠标移入
$('smallBox').onmouseover=function(){
	$('mask').style.display='block';
	$('bigBox').style.display='block';
}
//2 鼠标离开小盒子：隐藏遮罩和大图
$('smallBox').onmouseleave=function(){
	$('mask').style.display='none';
	$('bigBox').style.display='none';
}
//鼠标移动时
$('smallBox').onmousemove=function(){
	/*
	 * 让遮罩跟着移动
	 * 计算遮鼠标置坐标
	 * 计算遮罩位置坐标
	 * 设置遮罩显示位置
	 * 考虑遮罩可移动范围
	 * 
	 */
	//获得鼠标位置
	var pageX=event.pageX;
	var pageY=event.pageY;
	//计算遮罩位置
	var maskX=pageX-$('mask').offsetWidth/2;
	var maskY=pageY-$('mask').offsetHeight/2;
	//考虑遮罩可移动范围
	if(maskX<0){
		maskX=0;
	}
	if(maskY<0){
		maskY=0;
	}
	if(maskX>$('box').offsetWidth-$('mask').offsetWidth){
		maskX=$('box').offsetWidth-$('mask').offsetWidth;
	}
	if(maskY>$('box').offsetHeight-$('mask').offsetHeight){
		maskY=$('box').offsetHeight-$('mask').offsetHeight;
	}
	
	//设置遮罩显示位置
	$('mask').style.left=maskX+'px';
		$('mask').style.top=maskY+'px';
		
		
var bigImgToMove=$('bigImg').offsetWidth-$('bigBox').offsetWidth;
var maskToMove=$('smallBox').offsetWidth-$('mask').offsetWidth;
var rate=bigImgToMove/maskToMove;

$('bigImg').style.left=-rate*maskX+'px';
$('bigImg').style.top=-rate*maskY+'px';
}